import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Avatar, Button, Col, List, Menu, Row } from "antd";
import * as React from "react";
import { Link, RouteComponentProps } from "react-router-dom";
import { getDepartList, getDoctorOne, getHealthOne } from "../../axios/Request";
import BookingRules from "../../component/BookingRules";
import doctorImage from "../../images/doctor_bg.png";
import { Depart } from "../../type/CommonData";
import { DoctorData } from "../../type/DoctorData";
import { HospitalInfo } from "../../type/HospitalData";
import ChooseDoctorHeader from "./ChooseDoctorHeader";
import DepartmentList from "./DepartmentList";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    doctorInfo: {
      height: "100%",
      marginTop: "10px",
      marginRight: "10px",
      borderRadius: "5px",
      border: "1px solid rgb(222, 241, 255)",
      "&:hover": {
        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
        borderColor: "rgba(0, 0, 0, 0.09)"
      },
      overflow: "hidden",
      "& ul": {
        borderRight: "0px",
        backgroundColor: "#e6f4ff"
      },
      "& .ant-pagination": {
        backgroundColor: "#fafafa"
      },
      "& .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected": {
        backgroundColor: "#fafafa"
      },
      "& li": {
        textAlign: "center",
        color: "#1990ff"
      },
      "& .ant-menu-inline .ant-menu-item:after": {
        borderRight: "0px solid #1890ff"
      }
    },
    doctorCard: {
      display: "flex",
      alignItems: "center",
      "& .middle": {
        flexGrow: 1,
        fontSize: "16px",
        fontWeight: 560,
        "& span": {
          fontSize: "12px",
          fontWeight: "normal",
          marginLeft: "20px"
        },
        "& p": {
          fontSize: "14px",
          fontWeight: "normal"
        }
      },
      "& .image": {
        width: "100px",
        marginRight: "20px"
      },
      "& .button": {
        width: "200px",
        textAlign: "center"
      }
    }
  });
interface Iprops extends WithStyles<typeof styles>, RouteComponentProps<any> {}
interface Istates {
  doctorList: DoctorData[];
  departList: Depart[];
  hospital: HospitalInfo;
}
/**
 * 医生和科室选择
 */
class ChooseDoctor extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      departList: [],
      doctorList: [],
      hospital: {}
    };
  }
  public componentWillMount() {
    getHealthOne(this.props.match.params.id).then(value => {
      this.setState({
        hospital: value.data.content[0]
      });
    });
    getDepartList({ hospitalId: this.props.match.params.id }).then(value => {
      this.setState({ departList: value.data.content });
    });
    this.getDoctorData(null);
  }
  public getDoctorData = (departId: string | null) => {
    getDoctorOne({ hospitalId: this.props.match.params.id, departId }).then(
      value => {
        this.setState({
          doctorList: value.data.content
        });
      }
    );
  };
  public render() {
    const { classes } = this.props;
    return (
      <Row>
        <Col span={24}>
          <ChooseDoctorHeader data={this.state.hospital} />
        </Col>
        <Col span={18}>
          <div className={classes.doctorInfo}>
            <Row>
              <Col span={5}>
                <Menu mode="inline">
                  <Menu.Item key="1">内科</Menu.Item>
                  <Menu.Item key="2">外科</Menu.Item>
                  <Menu.Item key="3">皮肤科</Menu.Item>
                </Menu>
              </Col>
              <Col
                span={19}
                style={{ paddingLeft: "20px", paddingRight: "20px" }}
              >
                <DepartmentList
                  changeDepart={this.getDoctorData}
                  data={this.state.departList}
                />
                <div>
                  <List
                    dataSource={this.state.doctorList}
                    size={"large"}
                    itemLayout={"vertical"}
                    pagination={{
                      pageSize: 8,
                      hideOnSinglePage: true,
                      showTotal: (total: any) => `共 ${total} 位医生`
                    }}
                    split={true}
                    renderItem={(item: DoctorData) => (
                      <List.Item>
                        <div className={classes.doctorCard}>
                          <div className={"image"}>
                            <Avatar size={80} src={doctorImage} />
                          </div>
                          <div className={"middle"}>
                            {item.name}
                            <span>{item.title}</span>
                            <p>
                              (Firefox浏览器)使用
                              table-layout:fixed;强制table的宽度,内层td,th采
                              用word-break : break-all;或者word-wrap :
                              break-word ;换行，
                              使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用
                            </p>
                          </div>
                          <div className={"button"}>
                            <Link
                              to={{
                                pathname: `/choose-doctor/doctor-detail/${
                                  item.id
                                }`
                              }}
                            >
                              <Button>去挂号</Button>
                            </Link>
                            <div>
                              <Link
                                to={{
                                  pathname: `/order-doctor/estimate-doctor/${
                                    item.id
                                  }`
                                }}
                              >
                                查看评价
                              </Link>
                            </div>
                          </div>
                        </div>
                      </List.Item>
                    )}
                  />
                </div>
              </Col>
            </Row>
          </div>
        </Col>
        <Col span={6}>
          <BookingRules />
        </Col>
      </Row>
    );
  }
}

export default withStyles(styles)(ChooseDoctor);
